﻿<!doctype html>
<html>
<head>
<title>mosaic</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="styles/common.css" rel="stylesheet" />
</head>
<body>
<div class="prolist clearfix">
	<ul>
		<li class="circle">
			<a class="mosaic-overlay" href="#">
				<h6>Sloppy Art - A Mess of Inspiration</h6>
				<p>via the Nonsense Society (image credit: Florian)</p>
			</a>
			<div class="mosaic-backdrop">
				<img src="images/ext/1.jpg" alt="" />
			</div>
		</li>
		<li class="fade">
			<a class="mosaic-overlay" href="#">
				<h6>Sloppy Art - A Mess of Inspiration</h6>
				<p>via the Nonsense Society (image credit: Florian)</p>
			</a>
			<div class="mosaic-backdrop">
				<img src="images/ext/2.jpg" alt="" />
			</div>
		</li>
		<li class="bar">
			<a class="mosaic-overlay" href="#">
				<h6>Sloppy Art - A Mess of Inspiration</h6>
				<p>via the Nonsense Society (image credit: Florian)</p>
			</a>
			<div class="mosaic-backdrop">
				<img src="images/ext/3.jpg" alt="" />
			</div>
		</li>
		<li class="bar2">
			<a class="mosaic-overlay" href="#">
				<h6>Sloppy Art - A Mess of Inspiration</h6>
				<p>via the Nonsense Society (image credit: Florian)</p>
			</a>
			<div class="mosaic-backdrop">
				<img src="images/ext/4.jpg" alt="" />
			</div>
		</li>
		<li class="cover">
			<a class="mosaic-backdrop" href="#">
				<h6>Sloppy Art - A Mess of Inspiration</h6>
				<p>via the Nonsense Society (image credit: Florian)</p>
			</a>
			<div class="mosaic-overlay">
				<img src="images/ext/5.jpg" alt="" />
			</div>
		</li>
		<li class="cover2">
			<a class="mosaic-backdrop" href="#">
				<h6>Sloppy Art - A Mess of Inspiration</h6>
				<p>via the Nonsense Society (image credit: Florian)</p>
			</a>
			<div class="mosaic-overlay">
				<img src="images/ext/6.jpg" alt="" />
			</div>
		</li>
	</ul>
	
</div><!--/prolist-->

<div id="w" style="height:20px; background:#EEE;" class="s">w</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="scripts/mosaic.1.0.1.js"></script>
<script>
$(function(){
	$('.circle').mosaic({
		opacity:0.8 //Opacity for overlay (0-1)
	});
	$('.fade').mosaic();
	$('.bar').mosaic({
		animation:'slide'
	});
	$('.bar2').mosaic({
		animation:'slide'
	});			
	$('.cover').mosaic({
		animation	:	'slide',	//fade or slide
		hover_x		:	'400px'		//Horizontal position on hover
	});
	$('.cover2').mosaic({
		animation	:	'slide',	//fade or slide
		anchor_y	:	'top',		//Vertical anchor position
		hover_y		:	'80px'		//Vertical position on hover
	});
})	    
</script>
</body>
</html>